
<template>
  <n-grid x-gap="12" :cols="1">
    <n-gi>
      <n-input type="textarea" class="text" placeholder="字符串" @change="handleChange" />
    </n-gi>
  </n-grid>
  <div style="text-align: left;">
    <label>字符串长度：</label>
    <n-text>{{data}}</n-text>
  </div>
</template>

<script  lang="ts">
import { defineComponent,ref,Ref  } from 'vue'


export default defineComponent({
  name: 'Json',
  setup() {
    let data = ref(0);
    return {
      data,
      handleChange(v: string) {
        console.log(v.length)
        data.value = v.length;
      }
    }
  }
})
</script>

<style scoped>
.text {
  text-align: left;
  height: 80vh;
}
</style>